import { usePermissionStore } from '@/stores/permission'

export const permission = {
    mounted(el, binding) {
        const permissionStore = usePermissionStore()
        const { value } = binding

        if (value) {
            const hasPermission = checkPermission(value, permissionStore)
            if (!hasPermission) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            throw new Error('Need permissions! Like v-permission="\'view_water_chart\'"')
        }
    }
}

// 检查权限的辅助函数
function checkPermission(value, store) {
    if (typeof value === 'string') {
        // 单个权限检查
        return store.hasPermission(value)
    } else if (Array.isArray(value)) {
        // 多个权限检查，可以支持 AND 和 OR 操作
        if (value.length === 0) return false

        // 检查是否包含操作符
        const operator = value[0]
        const permissions = value.slice(1)

        if (operator === 'AND') {
            // 所有权限都必须满足
            return permissions.every(permission => store.hasPermission(permission))
        } else if (operator === 'OR') {
            // 满足其中一个权限即可
            return permissions.some(permission => store.hasPermission(permission))
        } else {
            // 没有操作符，默认为 OR 操作
            return value.some(permission => store.hasPermission(permission))
        }
    }

    return false
}

// 全局注册指令
export function setupPermissionDirective(app) {
    app.directive('permission', permission)
}
// // # 基础用法 - 单个权限
// <button v-permission="'view_water_chart'">查看用水图表</button>

// # 使用多个权限（OR 关系）
// <button v-permission="['view_water_chart', 'view_electricity_chart']">
//     查看能耗图表
// </button>

// # 使用 AND 操作符（必须同时具有多个权限）
// <button v-permission="['AND', 'view_water_chart', 'manage_water_plan']">
//     管理用水图表
// </button>

// # 使用 OR 操作符（具有任一权限即可）
// <button v-permission="['OR', 'view_water_chart', 'view_electricity_chart']">
//     查看能耗图表
// </button>